﻿@charset "utf-8";

html {
    height: 100%;
}

body {
    position: relative;
    height: 100%;
    background: #fff!important;
}

#ct {
    clear: both;
    width: 100%;
    background-color: #fff;
    padding-bottom: 0;
}

    #ct:after {
        display: block;
        clear: both;
        content: '';
    }

.viewer {
    width: 100%;
    height: 100%;
    position: relative;
}

.view_section {
    position: relative;
}

    .view_section .img {
        position: absolute;
        left: 0;
        top: 0;
    }

        .view_section .img img {
            position: absolute;
            left: 0;
            top: 0;
        }

.view_pattan {
    background: url(http://static.naver.net/m/comic/im/viewer/bg_pattern.jpg) repeat;
}

.viewer_gnb {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 49px;
    margin-bottom: 4px;
    background: url(http://static.naver.net/m/comic/im/viewer/bg_header.png) repeat-x 0 0;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
    z-index: 20;
}

    .viewer_gnb a {
        display: block;
        overflow: hidden;
        position: absolute;
        background: url(http://static.naver.net/m/comic/im/viewer/sp_tool5.png) no-repeat;
        font-size: 15px;
        font-weight: bold;
        color: #ddd;
        text-align: center;
        line-height: 30px;
        text-shadow: 0 1px #0f0f10;
        z-index: 40;
    }

        .viewer_gnb a span {
            margin-left: 6px;
        }

        .viewer_gnb a.btn_close span {
            margin: 0;
        }

    .viewer_gnb .top_bg {
        display: block;
        left: 50%;
        top: 2px;
        position: absolute;
        width: 296px;
        height: 50px;
        margin-left: -148px;
        background: url(http://static.naver.net/m/comic/im/viewer/bg_topwhite2.png) no-repeat;
        z-index: 30;
    }

    .viewer_gnb .btn_prev {
        left: 7px;
        top: 9px;
        width: 52px;
        height: 31px;
        background-position: 0 0;
    }

    .viewer_gnb .btn_info {
        right: 8px;
        top: 9px;
        width: 39px;
        height: 31px;
        background-position: -53px 0;
    }

        .viewer_gnb .btn_info span {
            display: block;
            overflow: hidden;
            text-indent: -9999px;
        }

    .viewer_gnb .btn_close {
        right: 8px;
        top: 9px;
        width: 47px;
        height: 31px;
        background-position: -94px 0;
    }

    .viewer_gnb .tit {
        display: block;
        overflow: hidden;
        padding: 0 54px 0 63px;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        text-align: center;
        line-height: 50px;
        text-shadow: 0 1px #0f0f10;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        .viewer_gnb .tit em {
            position: relative;
            top: -1px;
        }

    .viewer_gnb .bgl {
        position: absolute;
        left: 0;
        top: 0;
        width: 2px;
        height: 49px;
        background: url(http://static.naver.net/m/comic/im/viewer/sp_tool5.png) no-repeat -250px 0;
    }

    .viewer_gnb .bgr {
        position: absolute;
        right: 0;
        top: 0;
        width: 2px;
        height: 49px;
        background: url(http://static.naver.net/m/comic/im/viewer/sp_tool5.png)no-repeat -260px 0;
    }

.tool_area {
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 106px;
}

    .tool_area .tool {
        position: relative;
        margin: 0 46px 0 8px;
        background: url(http://static.naver.net/m/comic/im/viewer/bg_tool.png) repeat-x 0 0;
    }

        .tool_area .tool .tool_bg {
            display: block;
            position: absolute;
            top: 2px;
            left: 50%;
            width: 195px;
            height: 29px;
            margin-left: -97px;
            background: url(http://static.naver.net/m/comic/im/viewer/bg_bottomwhite.png) no-repeat;
            z-index: 10;
        }

        .tool_area .tool .bgl {
            position: absolute;
            left: -4px;
            top: 0;
            width: 4px;
            height: 64px;
            background: url(http://static.naver.net/m/comic/im/viewer/sp_tool5.png) no-repeat -290px 0;
        }

        .tool_area .tool .bgr {
            position: absolute;
            right: -4px;
            top: 0;
            width: 4px;
            height: 64px;
            background: url(http://static.naver.net/m/comic/im/viewer/sp_tool5.png) no-repeat -300px 0;
        }

    .tool_area .tool_lst {
        position: relative;
        height: 60px;
        padding: 0 89px 0 7px;
        border-bottom: 0;
    }

        .tool_area .tool_lst ul {
            overflow: hidden;
            position: relative;
            z-index: 30;
        }

        .tool_area .tool_lst li {
            float: left;
            width: 53px;
            height: 60px;
        }

            .tool_area .tool_lst li:nth-child(2) {
                width: 50px;
            }

            .tool_area .tool_lst li a {
                display: block;
            }

                .tool_area .tool_lst li a span {
                    display: block;
                    overflow: hidden;
                    width: 53px;
                    height: 60px;
                    margin: 0 auto;
                    background: url(http://static.naver.net/m/comic/im/viewer/sp_tool5.png) no-repeat;
                    text-indent: -9999px;
                }

            .tool_area .tool_lst li:nth-child(1) a span {
                background-position: -2px -37px;
            }

            .tool_area .tool_lst li:nth-child(2) a span {
                width: 50px;
                background-position: -64px -37px;
            }

            .tool_area .tool_lst li:nth-child(3) a span {
                background-position: -123px -37px;
            }

            .tool_area .tool_lst li.selected:nth-child(1) a span {
                background-position: -2px -87px;
            }

            .tool_area .tool_lst li.selected:nth-child(2) a span {
                background-position: -64px -87px;
            }

            .tool_area .tool_lst li.selected:nth-child(3) a span {
                background-position: -123px -87px;
            }

        .tool_area .tool_lst .btn {
            position: absolute;
            right: 7px;
            top: 0;
            padding-left: 10px;
            background: url(http://static.naver.net/m/comic/im/viewer/sp_tool5.png) no-repeat -450px 1px;
        }

            .tool_area .tool_lst .btn a {
                float: left;
                width: 37px;
                height: 60px;
                background: url(http://static.naver.net/m/comic/im/viewer/sp_tool5.png) no-repeat;
            }

                .tool_area .tool_lst .btn a.prev {
                    background-position: -341px -37px;
                }

                .tool_area .tool_lst .btn a.next {
                    background-position: -378px -37px;
                }

            .tool_area .tool_lst .btn span {
                overflow: hidden;
                display: block;
                text-indent: -9999px;
            }

    .tool_area .paging {
        position: relative;
        height: 40px;
    }

        .tool_area .paging .page_btn {
            position: absolute;
            left: -5px;
            top: 0;
        }

            .tool_area .paging .page_btn a {
                float: left;
                overflow: hidden;
                width: 37px;
                height: 40px;
                background: url(http://static.naver.net/m/comic/im/viewer/sp_tool5.png) no-repeat;
            }

                .tool_area .paging .page_btn a span {
                    overflow: hidden;
                    display: block;
                    text-indent: -9999px;
                }

            .tool_area .paging .page_btn .page_prev {
                background-position: -928px 0;
            }

            .tool_area .paging .page_btn .page_next {
                background-position: -965px 0;
            }

        .tool_area .paging .page_bar {
            position: relative;
            height: 26px;
            margin-top: 5px;
            padding: 12px 0 0 0;
            background: url(http://static.naver.net/m/comic/im/viewer/bg_bar.png) repeat-x;
        }

            .tool_area .paging .page_bar .bgl {
                position: absolute;
                left: -4px;
                top: 0;
                width: 4px;
                height: 38px;
                background: url(http://static.naver.net/m/comic/im/viewer/sp_tool5.png) no-repeat -270px 0;
            }

            .tool_area .paging .page_bar .bgr {
                position: absolute;
                right: -4px;
                top: 0;
                width: 4px;
                height: 38px;
                background: url(http://static.naver.net/m/comic/im/viewer/sp_tool5.png) no-repeat -280px 0;
            }

            .tool_area .paging .page_bar .bar_gage {
                display: inline-block;
                position: relative;
                width: 203px;
                height: 9px;
                margin: 0 1px 0 8px;
                background: url(http://static.naver.net/m/comic/im/viewer/sp_tool5.png) no-repeat 0 -161px;
                vertical-align: top;
                z-index: 10;
            }

            .tool_area .paging .page_bar .gage {
                display: inline-block;
                position: absolute;
                left: 0;
                top: 0;
                height: 9px;
                background: url(http://static.naver.net/m/comic/im/viewer/sp_tool5.png) no-repeat 0 -150px;
                z-index: 30;
            }

            .tool_area .paging .page_bar .control {
                position: absolute;
                top: -5px;
                display: block;
                width: 29px;
                height: 18px;
                margin: 0;
                background: url(http://static.naver.net/m/comic/im/viewer/sp_tool5.png) 100% -100px;
                z-index: 40;
            }

            .tool_area .paging .page_bar .page_num {
                display: inline-block;
                width: 46px;
                margin: -4px 0 0 0;
                font-family: Helvetica,sans-serif;
                font-size: 12px;
                font-weight: bold;
                color: #fff;
                vertical-align: top;
                text-shadow: 0 1px #121213;
                text-align: center;
            }

                .tool_area .paging .page_bar .page_num em {
                    color: #fe7003;
                    vertical-align: top;
                }

                .tool_area .paging .page_bar .page_num .bar {
                    color: #98999a;
                    font-weight: normal;
                    vertical-align: top;
                }

                .tool_area .paging .page_bar .page_num span {
                    vertical-align: top;
                }

            .tool_area .paging .page_bar .gage_end {
                display: none;
                width: 100%;
                height: 9px;
                background: url(http://static.naver.net/m/comic/im/viewer/sp_tool5.png) no-repeat 100% -211px;
                z-index: 20;
            }

            .tool_area .paging .page_bar .gage_onend {
                display: none;
                width: 100%;
                height: 9px;
                background: url(http://static.naver.net/m/comic/im/viewer/sp_tool5.png) no-repeat 100% -200px;
                z-index: 30;
            }

            .tool_area .paging .page_bar .bar_section {
                position: relative;
            }

            .tool_area .paging .page_bar .control_section {
                display: block;
                left: 0;
                position: absolute;
                width: 88%;
            }

.btn_tool {
    position: absolute;
    right: 7px;
    bottom: 6px;
    width: 33px;
    height: 34px;
}

    .btn_tool .btn_tbox {
        display: block;
        width: 33px;
        height: 34px;
    }

    .btn_tool a {
        display: block;
        height: 34px;
        background: url(http://static.naver.net/m/comic/im/viewer/sp_tool5.png) no-repeat -929px -50px;
    }

    .btn_tool span {
        display: block;
        overflow: hidden;
        text-indent: -9999px;
    }

    .btn_tool .up a {
        background-position: -966px -50px;
    }

.view_lst {
    overflow: hidden;
    padding: 70px 15px 15px 5px;
    background: url(http://static.naver.net/m/comic/im/viewer/bg_pattern.jpg) repeat;
}

    .view_lst li {
        float: left;
        width: 75px;
        margin: 0 0 20px 0;
    }

    .view_lst .num {
        float: left;
        width: 21px;
        margin: -4px 0 0 0;
        padding-right: 3px;
        font-size: 11px;
        color: #5b5b5b;
        font-weight: bold;
        text-align: right;
        vertical-align: top;
        text-shadow: 0 1px #b9babe;
    }

    .view_lst .thumb {
        position: relative;
        float: left;
        width: 51px;
        height: 87px;
        background: url(http://static.naver.net/m/comic/im/viewer/bg_loading.png) no-repeat;
        vertical-align: top;
        box-shadow: 1px 1px 2px rgba(0,0,0,.2),-1px -1px 2px rgba(0,0,0,.2);
    }

        .view_lst .thumb a {
            display: block;
            position: relative;
            height: 87px;
        }

    .view_lst .mask {
        display: none;
        position: absolute;
        left: 0;
        top: 0;
        width: 51px;
        height: 87px;
        background: url(http://static.naver.net/m/comic/im/viewer/bg_mask.png) no-repeat;
    }

    .view_lst li.selected .mask {
        display: block;
    }

.viewer_lyr {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 253px;
    height: 133px;
    margin: -78px 0 0 -126px;
    padding: 24px 0 0 0;
    background: url(http://static.naver.net/m/comic/im/viewer/bg_endpage3.png) no-repeat;
    text-align: center;
    z-index: 60;
}

.view_mini {
    height: 115px;
    margin-top: -57px;
    background: url(http://static.naver.net/m/comic/im/viewer/bg_endpage4.png) no-repeat;
}

.viewer_type2 {
    height: 114px;
    background: url(http://static.naver.net/m/comic/im/viewer/bg_error.png) no-repeat;
}

.viewer_lyr .tit {
    font-size: 16px;
    font-weight: bold;
    color: #f60;
    text-shadow: 0 1px #343639;
}

.viewer_lyr .txt {
    padding-top: 7px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px #343639;
}

.viewer_lyr .btn_group {
    overflow: hidden;
    padding: 15px 22px 0;
}

    .viewer_lyr .btn_group a {
        display: block;
        width: 207px;
        height: 37px;
        background: url(http://static.naver.net/m/comic/im/viewer/sp_endpage3.png) no-repeat;
        font-size: 15px;
        font-weight: bold;
        color: #fff;
        text-shadow: 0 1px #28292a;
        line-height: 35px;
    }

    .viewer_lyr .btn_group .btn_starview {
        margin-bottom: 6px;
        background-position: 0 0;
        text-align: center;
    }

    .viewer_lyr .btn_group span {
        display: inline-block;
        vertical-align: top;
    }

    .viewer_lyr .btn_group .btn_mini {
        float: left;
        width: 103px;
        height: 37px;
        margin-right: 2px;
        background-position: 0 -50px;
    }

    .viewer_lyr .btn_group .btn_mini2 {
        float: left;
        width: 103px;
        height: 37px;
        background-position: 0 -50px;
    }

    .viewer_lyr .btn_group .btn_small {
        float: left;
        width: 66px;
        height: 37px;
        margin-right: 4px;
        background-position: -112px -50px;
    }

    .viewer_lyr .btn_group .btn_small2 {
        float: left;
        width: 66px;
        height: 37px;
        margin-right: 5px;
        background-position: -112px -50px;
    }

    .viewer_lyr .btn_group .btn_small3 {
        float: left;
        width: 66px;
        height: 37px;
        background-position: -112px -50px;
    }

    .viewer_lyr .btn_group .ico_prev {
        display: inline-block;
        width: 9px;
        height: 15px;
        margin: 10px 1px 0 0;
        background: url(http://static.naver.net/m/comic/im/viewer/sp_endpage3.png) no-repeat 0 -100px;
    }

    .viewer_lyr .btn_group .ico_next {
        display: inline-block;
        width: 9px;
        height: 15px;
        margin: 10px 0 0 2px;
        background: url(http://static.naver.net/m/comic/im/viewer/sp_endpage3.png) no-repeat -50px -100px;
    }

    .viewer_lyr .btn_group .btn_close {
        position: absolute;
        right: 9px;
        top: 7px;
        width: 20px;
        height: 20px;
        background-position: -101px -100px;
    }

        .viewer_lyr .btn_group .btn_close strong {
            display: block;
            text-indent: -9999px;
        }

.viewer_end_ly {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 60;
}

    .viewer_end_ly .viewer_end {
        display: -webkit-flex;
        display: -moz-flex; 
        display: -o-flex; 
        display: -ms-flex; 
        display: flex; 
        width: 100%;
        height: 100%;
        -webkit-flex-direction: column;
        -moz-flex-direction: column; 
        -o-flex-direction: column; 
        -ms-flex-direction: column; 
        flex-direction: column;
    }

    .viewer_end_ly .viewer_inner {
        display: -webkit-flex;
        display: -moz-flex; 
        display: -o-flex; 
        display: -ms-flex; 
        display: flex; 
        overflow: hidden;
        -webkit-flex-grow: 1;
        -moz-flex-grow: 1; 
        -o-flex-grow: 1; 
        -ms-flex-grow: 1; 
        flex-grow: 1;
        -webkit-flex-direction: column;
        -moz-flex-direction: column; 
        -o-flex-direction: column; 
        -ms-flex-direction: column; 
        flex-direction: column;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        -o-justify-content: center; 
        -ms-justify-content: center;
        justify-content: center;
    }

    .viewer_end_ly .title {
        padding: 1px 0 0 6px;
        font-size: 23px;
        font-weight: bold;
        color: #f60;
        line-height: 29px;
        text-shadow: 0 1px 0 #000;
    }

        .viewer_end_ly .title em {
            display: block;
        }

    .viewer_end_ly .viewer_inner a {
        display: block;
        overflow: hidden;
        width: 140px;
        height: 36px;
        margin: 0 auto;
        background: url(http://static.naver.net/m/comic/im/sp_smart.png) no-repeat;
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        line-height: 35px;
        text-shadow: 0 1px 0 #000;
        background-size: 140px 440px;
    }

    .viewer_end_ly .btn_group {
        position: relative;
        margin-top: 19px;
    }

        .viewer_end_ly .btn_group .btn_prev, .viewer_end_ly .btn_group .btn_next {
            position: absolute;
            top: -46px;
            width: 66px;
            height: 173px;
            text-indent: -9999px;
        }

        .viewer_end_ly .btn_group .btn_prev {
            left: 0;
            background-position: 0 -40px;
        }

            .viewer_end_ly .btn_group .btn_prev.on, .viewer_end_ly .btn_group a.btn_prev:hover {
                background-position: 0 -217px;
            }

        .viewer_end_ly .btn_group .btn_next {
            right: 0;
            background-position: 100% -40px;
        }

            .viewer_end_ly .btn_group .btn_next.on, .viewer_end_ly .btn_group a.btn_next:hover {
                background-position: 100% -217px;
            }

        .viewer_end_ly .btn_group .btn_list {
            margin-top: 6px;
        }

    .viewer_end_ly .viewer_inner .btn_close {
        position: absolute;
        top: 0;
        right: 0;
        width: 60px;
        height: 60px;
        background-position: 19px -395px;
        text-indent: -999px;
    }

    .viewer_end_ly .end_pl {
        display: -webkit-flex;
        display: -moz-flex; 
        display: -o-flex; 
        display: -ms-flex; 
        display: flex; 
        border-top: none;
        -webkit-flex-direction: column;
        -moz-flex-direction: column; 
        -o-flex-direction: column; 
        -ms-flex-direction: column; 
        flex-direction: column;
    }

.dimmed {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    background: #000;
    opacity: .85;
}

.dim {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    background: #000;
    opacity: .5;
}

.view_pattan {
    background: url(http://static.naver.net/m/comic/im/viewer/bg_pattern.jpg) repeat;
}

.btn_tprev {
    display: block;
    position: absolute;
    left: 6px;
    bottom: 6px;
    width: 33px;
    height: 34px;
    background: url(http://static.naver.net/m/comic/im/viewer/sp_tool5.png) no-repeat -929px -100px;
}

    .btn_tprev a {
        display: block;
        height: 34px;
    }

    .btn_tprev span {
        display: block;
        overflow: hidden;
        text-indent: -9999px;
    }

.cmt {
    overflow: hidden;
    margin-top: 0;
}

    .cmt .wr {
        margin-top: 49px;
        border-top: 0;
    }

    .cmt .fbtn {
        margin-bottom: -1px;
        border-bottom: 1px solid #dfe1e3!important;
    }

    .cmt .star {
        border-bottom: 0;
    }

.plugin {
    border-bottom: 0;
}

.other_webtoon:nth-child(n+2) {
    margin-top: -1px;
}

.commentDiv {
    overflow: hidden;
}

.u_comment {
    margin-top: 49px!important;
}

.bt_none {
    border-top: none!important;
}

.popup_bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(http://static.naver.net/m/comic/im/viewer/bg_pattan3.png) repeat 0 0;
    -webkit-background-size: 25px 25px;
    z-index: 300;
}

.popup {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 900;
}

    .popup img {
        vertical-align: top;
    }

    .popup .blind {
        visibility: hidden;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        font-size: 0;
        line-height: 0;
    }

    .popup .btn_close {
        display: block;
        position: absolute;
        right: 12px;
        top: 11px;
        width: 25px;
        height: 25px;
        background: url(http://static.naver.net/m/comic/im/viewer/pop_btn_close.png) no-repeat;
        -webkit-background-size: 25px 25px;
        z-index: 400;
    }

        .popup .btn_close span {
            display: block;
            overflow: hidden;
            text-indent: -9999px;
        }

.pop_ct {
    overflow: hidden;
}
